    
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Picture</title>
	<link rel="stylesheet" type="text/css" href="/Personal website/css/picture.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
	<body>
		<div class="picture-section">
			<div class="inner-width">
				<h1>My Picture</h1>
				<div class="border"></div>
				<div class="picture">
					<a href="img/1.jpg" class="image">
						<img src="img/1.jpg" alt="全国大学生内容创新创业大赛优秀奖" />
					</a>
					<a href="img/2.jpg" class="image">
						<img src="img/2.jpg" alt="活动照片" />
					</a>
					<a href="img/3.jpg" class="image">
						<img src="img/3.jpg" alt="志愿者照片" />
					</a>
					<a href="img/4.jpg" class="image">
						<img src="img/4.jpg" alt="阿里云冬令营认证证书" />
					</a>
					<a href="img/5.jpg" class="image">
						<img src="img/5.jpg" alt="阿里云冬令营营员证" />
					</a>
					<a href="img/6.jpg" class="image">
						<img src="img/6.jpg" alt="王者荣耀比赛" />
					</a>
					<a href="img/7.jpg" class="image">
						<img src="img/7.jpg" alt="" />
					</a>
					<a href="img/8.jpg" class="image">
						<img src="img/8.jpg" alt="" />
					</a>
				</div>
				
				
			</div>
			
		</div>
		<script>
	$(".gallery").magnificpopup({
		delegate:'a',
		type:'image',
		picture:{
			enabled:true
		}
	})
</script>
	</body>
</html>
